// 导入静态路由
import { constantRoutes } from '@/router'
// 导入所有动态路由
import { asyncRoutes } from '@/router/index.js'
// vuex中的permission模块用来存放当前的 静态路由 + 当前用户的权限路由

const state = {
  // 用户拥有的权限路由
  routes: constantRoutes
}

const mutations = {
  // 修改权限路由的方法
  // newRoutes是用户拥有的权限路由
  setRoutes(state, newRoutes) {
    // 用户登录 都应该在静态路由的基础上进行追加用户的权限路由
    state.routes = [...constantRoutes, ...newRoutes]
  }
}

const actions = {
  // 筛选用户所拥有的权限路由方法
  filterRoutes(ctx, menus) {
    const routes = []
    // menus是用户拥有的路由标识['user','setting'....]
    // asyncRoutes是所有动态路由，[{path:'/',name:'user'}]
    menus.forEach(key => {
      routes.push(...asyncRoutes.filter(item => item.name === key))
    })
    // routes 是用户拥有的路由
    ctx.commit('setRoutes', routes)
    // 返回用户拥有的路由，方便后续做路由界面,路由界面和左侧菜单栏是需要分开做
    return routes
  }

}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}
